<template>
	<view class="content">
		<view class="searchHistory">
			<view class="top">
				<view class="title">
					<text>搜索记录</text>
				</view>
				<view class="junk">
					<image src="@/static/images/junk.png" mode="" style="width: 20px;height: 20px;"  @click="open">
				</image>
				</view>
			</view>
			<view class="searchlist">
				<view class="hotitem" v-for="item,index in historylist" :key="index" @click="searchhistory(item,index)">
					<text :class='historybar===index? "item-active-color":"item1-color"'>{{item}}</text>
				</view>
			</view>
		</view>
		<view class="hotsongs">
			<view class="left">
				<view class="title">
					<text>本日推荐</text>
				</view>
			</view>
			<div class="bowon">
				<view class="hotitem" v-for="item,index in hotsongslist" :key="index" @click="searchrecommend(item,index)">
					<text :class='recommendbar===index? "item-active-color":"item1-color"'>{{item.first}}</text>
				</view>
			</div>
		</view>
		<view class="songlist">
			<view class="searchtop">
				<view class="title">
					<text>搜索列表</text>
				</view>
			</view>
			<view >
				<scroll-view scroll-y="true" style="height: 350px;margin-top: 20rpx;">
					<view v-for="item,index in searchlist" :key="index" @click="gotoplay(item)">
					<view class="container">
						<view class="rank">
							<text >{{index+1}}</text>
							<image src="@/static/images/top.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
						</view>
						<view class="desc">
							<view class="songname">
								<text>{{item.name}}</text>
							</view>
							<view class="songdesc">
								<text>{{item.ar[0].name}}</text>
								<text>·</text>
								<text>{{item.name}}</text>
							</view>
							</view>
							<view class="rightimg">
								<image src="../../../static/images/playsong.png" mode="" style="width: 20px;height: 20px;margin-right: 30rpx;"></image>
								<image src="@/static/images/listitem.png" mode="" style="width: 20px;height: 20px;"></image>
							</view>
					</view>
					</view>
				</scroll-view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import music from '@/common/api/request.js'
	export default {
		data() {
			return {
				hotsongslist:[],
				searchlist:[],
				listshow:true,
				recommendbar:100,
				historybar:100,
				historylist:[]
			}
		},
		onLoad() {
			this.gethotsongsdata(),
			uni.getStorage({
				key:'historylist',
				success: (res) => {
					this.historylist = JSON.parse(res.data)
				}
			})
		},
		onNavigationBarSearchInputConfirmed(e){
			this.getsearchsongsdata(e.text)
			let idx = this.historylist.indexOf(e.text)
			if (idx<0){
				this.historylist.unshift(e.text)
			}else{
				this.historylist.splice(idx,1)[0]
				this.historylist.unshift(e.text)
			}
			uni.setStorage({
				key:'historylist',
				data:JSON.stringify(this.historylist)
			})
		},
		methods: {
			searchhistory(item,index){
				this.historybar = index
				this.getsearchsongsdata(item)
				this.recommendbar =100
			},
			gotoplay(item){
				uni.$emit('getsearchsongitem',item)// '上海'
				uni.switchTab({
					url:'/pages/music/music' 
				})
			},
			searchrecommend(item,index){
				this.recommendbar = index
				this.historybar = 100
				let idx = this.historylist.indexOf(item.first)
				if (idx<0){
					this.historylist.unshift(item.first)
				}else{
					this.historylist.splice(idx,1)[0]
					this.historylist.unshift(item.first)
				}
				uni.setStorage({
					key:'historylist',
					data:JSON.stringify(this.historylist)
				})
				this.getsearchsongsdata(item.first)
			},
			open() {
				uni.showModal({
					title:"是否删除历史搜索记录",
					success: (res) => {
						if(res.confirm){
							uni.removeStorage({
								key:'historylist'
							}),
							this.historylist = []
							uni.showToast({
								title:'清除记录成功',
								icon:'success'
							})
						}
					}
				})
			},
			gethotsongsdata() {
				music.request({
					url: '/search/hot'
				}).then((data) => {
					this.hotsongslist = data.data.result.hots
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			getsearchsongsdata(keywords) {
				uni.showLoading({
					title:'加载中'
				})
				music.request({
					url: `/cloudsearch?keywords=${keywords}`
				}).then((data) => {
					this.searchlist = data.data.result.songs
					uni.hideLoading()
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
		}
	}
</script>

<style>
	.title {
		color: #bfbfbf;
	}

	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 50rpx;
	}
	.searchtop{
		margin-left: 40rpx;
	}
	.left{
		margin-left: 50rpx;
	}
	.hotsongs{
		display: flex;
		flex-direction: column;
	}
	.bowon{
		margin: 40rpx 50rpx;
	}
	.hotitem{
		background-color: #1d1d1d;
		font-size: 28rpx;
		display: inline-block;
		border-radius: 30rpx;
		color: #bfbfbf;
		padding: 10rpx;
		margin: 10rpx;
	}
	
	.rank {
	
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.songname {
		width: 500rpx;
		overflow: hidden;
		color: white;
		font-size: 35rpx;
		font-weight: 500;
		text-overflow: ellipsis;
		flex-wrap: nowrap;
	}
	
	.songdesc {
		color: #bfbfbf;
		font-size: 26rpx
	}
	
	.container {
		margin-left: 34rpx;
		display: flex;
		margin-top: 20rpx;
	}
	
	.item {
		display: flex;
		margin-top: 40rpx;
		align-items: center;
	}
	
	.desc {
		margin-left: 70rpx;
	}
	.item-active-color{
		color: #02d15f;
	}
	.item1-color{
		color: #bfbfbf;
	}
	.historyitem{
		color: #bfbfbf;
	}
	.searchlist{
		margin-left: 40rpx;
	}
</style>
